<template>
  <div ref="chart" style="width: 800px; height: 600px"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import chinaJson from "@/assets/china.json";
import * as echarts from "echarts";
// 引入中国地图数据
// import chinaMap from "echarts-china-map";

echarts.registerMap("china", chinaJson);

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  // 定义经纬度范围
  const minLat = 20;
  const maxLat = 50;
  const minLng = 100;
  const maxLng = 130;

  const option = {
    // 添加背景色配置
    backgroundColor: "rgba(0, 0, 0, 0)",
    // 使用地理坐标系
    geo: {
      map: "china",
      roam: true,
      label: {
        emphasis: {
          show: false,
        },
      },
      // 地图区域填充透明
      itemStyle: {
        areaColor: "rgba(0, 0, 0, 0)",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "red",
        },
        z: 10,
      },
      axisTick: {
        show: true,
        z: 10,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "red",
        },
        z: 10,
      },
      left: "center",
      top: "center",
      zoom: 1.2,
      minLat,
      maxLat,
      minLng,
      maxLng,
      // 尝试不同投影方式，如 albers
      projection: "albers",
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: [
          { name: "点1", value: [110, 30] },
          { name: "点2", value: [120, 40] },
        ],
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped></style>
